<template>
<view class="page" :style="type=='hks'?'height:300px':''"> 
	<view class="r_div">
		<view class="wxt_div" @click="initCity">
			<image src="https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dingwei.png" mode=""></image>
			<view class="">{{myCity.city_name}}</view>
		</view>
	</view>
	<view class="map_div">
		<map v-if='mapData.lng' ref="mapView" name="" 
			@markertap='markertap' @regionchange='changeScale' @callouttap='clickMap'
			:enable-satellite='satellite' 
			:longitude='mapData.lng' :latitude='mapData.lat' 
			:scale='mapData.scale' :markers="mapData.list"
			:circles='circles' :polygons='polygons'
			>
		</map>
	</view>
</view>
</template>

<script setup>
	import {onShow} from '@dcloudio/uni-app';
	import Tabbar from '@/components/tabbar.vue'
	import mapCode from '@/utils/mapData.json'
	import { city,hkroom ,parklist,companylist,GetSuCityInfo,chain_city_map, getHttpDataFromWeb } from '@/utils/api'
	let navH = ref(uni.getStorageSync('navH'))
	let navH1 = ref(uni.getStorageSync('navH1'))
	let navH2 = ref(uni.getStorageSync('navH2'))
	let color = ["#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66',"#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66',"#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66',"#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66',"#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66',"#ff4d4f66",'#ff7a4566','#ffa94066','#ffc53d66','#ffec3d66','#bae63766','#73d13d66','#36cfc966','#40a9ff66','#597ef766','#9254de66']
	let color1 = ["#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de',"#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de',"#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de',"#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de',"#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de',"#ff4d4f",'#ff7a45','#ffa940','#ffc53d','#ffec3d','#bae637','#73d13d','#36cfc9','#40a9ff','#597ef7','#9254de']
	
	const internalInstance = getCurrentInstance()
	
	// onShow(()=>{
	// 	initCity()
	// })
	const props = defineProps({
		chain_id:{
			type:String,
			default:''
		},
		type:{
			type:String,
			default:''
		},
		isQg:{
			type:Boolean,
			default:false
		}
	})
	// 样式
	const style = reactive({
		height:'300px',
		windowH:uni.getStorageSync('windowH')+'px',
	})
	function touchstart(e){
		let info = uni.createSelectorQuery().select(".p_content")
		let height = 0
		info.boundingClientRect((data)=>{ //data - 各种参数
			height = data.height
			if(height==220){
				style.height = uni.getStorageSync('windowH') - 180 +'px'
			}
		}).exec()
	}
	function pChange(e){
		if(!e.show){
			style.height = '300px'
		}
	}
	
	function huanH(name,num){
		name = name.split('')
		name = name.map((item,index)=>{
			return index%num==(num-1) ? item + '\n' : item
		})
		name = name.join('')
		return name
	}

	onMounted(()=>{
		if(cityItem.type<3){
			getCode()
		}else{
			
		}
	})
	
	// 类型
	const typeList = reactive([
		{name:'项目',id:'project'},
		{name:'地块',id:'dikuai'},
	])
	
	const type_id = ref('project')
	
	// 地图
	let mapData = reactive({
		lng:'',
		lat:'',
		scale:16,
		list:[],
		detail:{},
	})
	let circles = reactive([{
		latitude:'',
		longitude:'',
		color:'#439EF2',
		fillColor:'#439EF288',
		radius:10
	}])
	
	let myCity = props.isQg?{id:1,type:0,city_name:'全国'}:uni.getStorageSync('myCity')
	
	const keywords = ref('')
	function getListByKey(i){
		if(!i.detail.value){
			return
		}
		companylist({city_id:cityItem.id,limit:50,keywords:i.detail.value,chain_id:props.chain_id}).then(res=>{
			mapData.list = res.data.data.map(item=>{
				item.iconPath = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dian.png'
				item.width = 20
				item.height = 20
				item.latitude = item.lat
				item.longitude = item.lng
				item.callout = {
					content: huanH(item.name||item.company_name,8),
					textAlign:'center',
					color:'#333',
					bgColor:'#fff',
					borderRadius:4,
					padding: 4,
					display:'ALWAYS'
				}
				return item
			})
		})
	}
	
	let cityItem = JSON.parse(JSON.stringify(myCity))
	let cityList = []
	//获取列表
	city({city_id:myCity.id}).then(res=>{
		cityList = res.data
		//获取当前城市信息
		getCityInfo()
	})
	
	function initCity(){
		keywords.value=''
		cityItem = JSON.parse(JSON.stringify(myCity))
		getCityInfo()
	}
	
  function getCityInfo(){
		mapData.lng = 0 
		internalInstance.proxy.$forceUpdate()
		GetSuCityInfo({city_id:cityItem.id}).then(res=>{
			mapData.lng = parseFloat(res.data.lng) +0.2
			mapData.lat = res.data.lat
			mapData.scale = res.data.type==0?4:res.data.type == 1?6.5:res.data.type == 2?7.6:11
			
			//获取项目信息
			if(cityItem.type>2){
				circles[0].latitude = res.data.lat
				circles[0].longitude = res.data.lng
				circles[0].radius = 12000
				getProject(mapData.lng,mapData.lat)
			}else{
				circles[0].latitude = ''
				circles[0].longitude = ''
				getProjectByArea()
			}
		})
	}
	//获取项目信息
	function getProject(lng,lat){
		// ,distance:circles[0].radius
		let api = props.type == 'park'?
							parklist({city_id:cityItem.id}):
							companylist({city_id:cityItem.id,limit:2000,distance:circles[0].radius,lat,lng,chain_id:props.chain_id})
		api.then(res=>{
			mapData.list = res.data.data.map(item=>{
				item.iconPath = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dian.png'
				item.width = 20
				item.height = 20
				item.latitude = item.lat
				item.longitude = item.lng
				item.callout = {
					content: huanH(item.park_name||item.company_name,8),
					textAlign:'center',
					color:'#333',
					bgColor:'#fff',
					borderRadius:4,
					padding: 4,
					display:circles[0].radius>40000?'BYCLICK':'ALWAYS'
				}
				return item
			})
			internalInstance.proxy.$forceUpdate()
		})
	}
	//获取项目信息
	function getProjectByArea(){
		let api = props.type == 'park'?
							chain_city_map({city_id:cityItem.id,type:'park'}):
							chain_city_map({city_id:cityItem.id,chain_id:props.chain_id})
		api.then(res=>{
			mapData.list = res.data.map((item,index)=>{
				item.iconPath = 'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/touming.png'
				item.width = 4
				item.height = 4
				item.latitude = item.lat
				item.longitude = item.lng
				// item.title = item.city_name
				item.callout = {
					content: huanH(item.city_name,6) + '\n' + item.total,
					textAlign:'center',
					color:'#fff',
					bgColor:color1[8],
					borderRadius:4,
					padding: 4,
					display:'ALWAYS'
				}
				return item
			})
		})
	}
	
	//地图缩放 显示文字
	function changeScale(e){
		if(!e.target.centerLocation)
			return
		if(cityItem.type>2){
			let lat = e.target.centerLocation.latitude
			let lng = e.target.centerLocation.longitude
			circles[0].latitude = lat
			circles[0].longitude = lng
			getRadius(e.target)
			getProject(lng,lat)
		}
	}
	// 获取半径
	function getRadius(data){
		let lat1 = data.region.northeast.latitude
		let lng1 = data.region.northeast.longitude
		let lat2 = data.region.southwest.latitude
		let lng2 = data.region.southwest.longitude
		let radius = 0
		radius = getMapDistance(lat1,lng1,lat2,lng1)/2*1.2
		circles[0].radius = radius
	}
	function getMapDistance(lat1, lng1, lat2, lng2){
			const radUserLatitude = lat1 * Math.PI / 180
			const radLatitude = lat2 * Math.PI / 180
			const x = lng1 * Math.PI / 180 - lng2 * Math.PI / 180
			const y = radUserLatitude - radLatitude
			return distanceComputer(x,y,radUserLatitude, radLatitude)
	}
	function distanceComputer(x,y,userLatitude,latitude){
		const radLength = 2*Math.asin(Math.sqrt(Math.pow(Math.sin(y/2),2) + Math.cos(userLatitude)*Math.cos(latitude)*Math.pow(Math.sin(x/2),2)))
		return Math.round(radLength * 6371000 * 10000) / 10000 // 保留四位小数
	}
	//半径结束
	
	
	//地块颜色
	let polygons = reactive([])
	
	import Base64 from 'base-64';

	const mapUrl ='https://apis.map.qq.com/ws/district/v1'
	
	//获取城市code
	function getCode(){
		let item = mapCode.find(item=>item.name.indexOf(cityItem.city_name)>-1||cityItem.city_name.indexOf(item.name)>-1)
		let code = item?item.code:''
		let url
		if(code){
			url = Base64.encode(mapUrl + '/getchildren?key=KXMBZ-7O3WW-UVYRL-RNUFA-OWYYS-V5BN7&get_polygon=2&max_offset=500&id='+ code)
		}else{
			url = Base64.encode(mapUrl + '/getchildren?key=KXMBZ-7O3WW-UVYRL-RNUFA-OWYYS-V5BN7&get_polygon=2&max_offset=500')
		}
		getSekuai(url)
	}
	function getSekuai(url){
		getHttpDataFromWeb({url}).then(res=>{
			res.data.result[0].forEach((item,index)=>{
				let colorC = color[index]
				let colorB = color1[index]
				item.polygon.forEach(itemp=>{
					let obj = changeXs(itemp)
					polygons.push({
						points:obj,
						fillColor:colorC,
						strokeColor:colorB,
						strokeWidth:2
					})
				})
			})
		})
	}
	function changeXs(item){
		let obj = []
		for(let i=0;i<(item.length/2);i++){
			obj.push({latitude:item[2*i+1],longitude:item[2*i]})
		}
		return obj
	}
	
	
	function clickMap(e){
		console.log(cityItem.type)
		if(cityItem.type>2){
			markertap(e)
		}else{
			console.log(cityList)
			cityList.forEach(item=>{
				if(item.id==e.markerId){
					cityItem = item
					getCityInfo()
				}else if(item.children&&item.children.length>0){
					item.children.forEach(item1=>{
						if(item1.id==e.markerId){
							cityItem = item1
							getCityInfo()
						}else if(item1.children&&item1.children.length>0){
							item1.children.forEach(item2=>{
								if(item2.id==e.markerId){
									cityItem = item2
									getCityInfo()
								}
							})
						}
					})
				}
			})
		}
	}
	
	
	const popup = ref(null)
	//点击marker
	function markertap(e){
		let item = mapData.list.find(item=>e.detail.markerId == item.id)
		if(props.type== 'park'){
			uni.navigateTo({
				url:'/pages/parkDetail/parkDetail?id='+item.id
			})
		}else{
			mapData.list = mapData.list.map(item=>{
				let isC = e.detail.markerId == item.id
				item.iconPath = isC?'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dian_xz.png':'https://wqq103910.oss-cn-hangzhou.aliyuncs.com/images/fuzhou/image/dian.png'
				item.width = isC?25:20
				item.height = isC?25:20
				return item
			})
			// popup.value.open()
			mapData.detail = res.data 
		}
	}
	const satellite = ref(false)
	// 卫星图
	function changeMode(){
		satellite.value = !satellite.value
	}
</script>
<style scoped lang="scss">
.page{
	// width: calc(100% - 20px);
	height: 400px;
	overflow: hidden;
	margin: 10px 0px;
	border: 2px solid #666;
	border-radius: 8px;
	position: relative;
	.nav{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 10;
		transition: all 0.5s;
	}
	.input_view{
		display: flex;
		align-items: center;
		border-radius: 2px;
		color: #333;
		width: 100%;
		.title{
			font-weight: 500;
			text-align: center;
			font-size: 22px;
			text-align: center;
			width: 100%;
			color: #000;
		}
	}
	.ss_div{
		position: absolute;
	}
}
.map_div{
	width: 100%;
	height: 100%;
}
map{
	width: 100%;
	height: 100%;
}
//#ifdef APP-PLUS
.map_div{
	width: 100%;
	height: v-bind('style.windowH') !important;
}
map{
	width: 100%;
	height: v-bind('style.windowH') !important;
}
//#endif
.r_div{
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 10;
}
.t_div{
	position: absolute;
	left: 20px;
	z-index: 10;
}
.wxt_div{
	padding: 5px 10px;
	border-radius: 4px;
	background-color: #fff;
	font-size: 14px;
	color: #333;
	text-align: center;
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
	margin-bottom: 10px;
	max-width: 42px;
	image{
		width: 26px;
		height: 26px;
	}
}

.wxt_div1{
	margin-left:8px ;
	&:first-child{
		margin-left: 0;
	}
}
.input_ss{
	box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
	width: calc(100% - 40px);
	opacity: 1;
	border-radius: 4px;
	background: #fff;
	display: flex;
	justify-content: space-between;
	position: absolute;
	left: 20px;
	align-items: center;
	z-index: 10;
	.btn_list{
		width: 80px;
		height: 32px;
		line-height: 32px;
		margin-right: 5px;
		font-size: 14px;
		color: #fff;
		background-color: #319fff;
		text-align: center;
		border-radius: 6px;
	}
}
.input_div{
	width: calc(100% - 100px);
	height: 34px;
	opacity: 1;
	border-radius: 10px;
	background: rgb(245, 245, 245);
	margin: 10px 5px;
	display: flex;
	align-items: center;
	.ss{
		position: relative;
		width: 16px;
		height: 16px;
		margin: 0 12px 0 12px;
	}
	.ss_text{
		font-size: 12px;
		color: rgba(197, 197, 197, 1);
		width: calc(100% - 40px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.ss_type{
		position: absolute;
		right: 12px;
		color: rgba(0, 145, 255, 1);
		font-weight: 800;
		font-size: 12px;
		display: flex;
		align-items: center;
		width: 70px;
		text{
			display: inline-block;
			width: 50px;
		}
		image{
			height: 12px;
			width: 12px;
			margin-left: 6px;
			position: relative;
			top: 2px;
		}
		&::before{
			position: absolute;
			content: ' ';
			height: 16px;
			width: 2px;
			background: #eee;
			left: -10px;
		}
	}
}

.p_div{
	width: calc(100% - 40px);
	background-color: #fff;
	padding: 20px 20px 0;
	height: v-bind('style.height');
	border-radius: 20px 20px 0 0;
	transition: all 0.5s;
	position: relative;
	.p_hua{
		position: absolute;
		top: 6px;
		width: 60px;
		height: 4px;
		border-radius: 2px;
		background-color: #999;
		left: calc(50% - 30px);
	}
	.p_content{
		width: 100%;
		max-height: calc(100% - 80px);
		overflow-y: auto;
		margin-top: 10px;
	}
}
.p_top{
	.p_title{
		width: 100%;
		font-size: 16px;
		margin-bottom: 6px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.p_text{
		font-size: 14px;
		color: #666;
	}
	.p_chain{
		display: inline-block;
		font-size: 14px;
		padding: 1px 6px;
		border-radius: 4px;
		color: #fff;
		background: #6CCEFF;
		margin-right: 6px;
		margin-bottom: 4px;
	}
}
.bgcolor_blue{
	background-color: #267DE9 !important;
}
.color_fff{
	color: #fff !important;
}
</style>

